<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>视力检测系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="./js/phaser.min.js"></script>
    <script src="./js/game.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="navbar-brand">视力检测系统</div>
        <nav class="navbar-links">
            <a href="../../../index.html" class="nav-link">主页</a>
            <a href="#" class="nav-link">关于</a>
            <a href="#" class="nav-link">帮助</a>
        </nav>
        <!-- 汉堡菜单 -->
        <div class="hamburger" id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>

    <!-- 游戏容器 -->
    <div id="game-container">
        <div id="game"></div>
    </div>

    <!-- 说明弹窗 -->
    <div id="instructionModal" class="modal">
        <div class="modal-content instruction-content">
            <h3>视力检测说明</h3>
            <div class="instruction-text">
                <p><span class="icon">📏</span>请保持眼睛与屏幕距离50厘米。</p>
                <p><span class="icon">🎯</span>使用键盘方向键指示E字开口的方向：</p>
                <div class="key-instructions">
                    <p><span class="key">↑</span>E字朝上</p>
                    <p><span class="key">↓</span>E字朝下</p>
                    <p><span class="key">←</span>E字朝左</p>
                    <p><span class="key">→</span>E字朝右</p>
                </div>
                <p><span class="icon">🔄</span>每次测试共10次，系统会根据您的答题准确度评估视力。</p>
                <p><span class="icon">💡</span>如果看不清楚，请选择您认为最可能的方向。</p>
            </div>
            <button id="startButton" class="custom-button">按任意键开始检测</button>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div id="resultModal" class="modal">
        <div class="modal-content result-content">
            <h3>检测结果</h3>
            <div class="result-container">
                <div class="result-section">
                    <span class="icon">👁️</span>
                    <div id="resultText"></div>
                </div>
                <div class="result-section">
                    <span class="icon">💡</span>
                    <div id="adviceText" class="advice-text"></div>
                </div>
                <div class="result-section">
                    <span class="icon">📋</span>
                    <div class="tips-text">
                        <p>定期进行视力检查，保持良好的用眼习惯。</p>
                        <p>如有视力问题，请及时就医。</p>
                    </div>
                </div>
            </div>
            <div class="button-container">
                <button id="restartButton" class="custom-button">重新检测</button>
            </div>
        </div>
    </div>

    <!-- 底部信息栏 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 Group4. 版权所有.</p>
            <div class="footer-links">
                <a href="#">隐私政策</a>
                <span class="separator">|</span>
                <a href="#">使用条款</a>
                <span class="separator">|</span>
                <a href="#">联系我们</a>
            </div>
        </div>
    </footer>

    <!-- 响应式导航菜单脚本 -->
    <script>
        const hamburger = document.getElementById('hamburger');
        const navbarLinks = document.querySelector('.navbar-links');

        hamburger.addEventListener('click', () => {
            hamburger.classList.toggle('active');
            navbarLinks.classList.toggle('active');
        });

        // 点击链接时关闭菜单
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navbarLinks.classList.remove('active');
            });
        });

        // 点击页面其他区域关闭菜单
        document.addEventListener('click', (e) => {
            if (!hamburger.contains(e.target) && !navbarLinks.contains(e.target)) {
                hamburger.classList.remove('active');
                navbarLinks.classList.remove('active');
            }
        });
    </script>
</body>
</html>